<template>
  <div class="g3">
    <div class="ks-row-middle mb20 lh1">
      <span style="width: 60px">组件</span>
      <el-select
        v-if="compId && compId!=='noData'"
        v-model="compId"
        filterable
        style="width: 100%"
      >
        <el-option
          v-for="com in list"
          :key="com.key"
          :value="com.key"
          :label="com.name + '（' +com.key + '）'"
        />
      </el-select>
      <span v-else>没有数据</span>
    </div>
      <template v-if="compId && compId!=='noData'">
        <div  class="ks-row-middle mb20 lh1">
          唯一标识： {{ compId }}
        </div>
        <el-divider>模型信息</el-divider>
        <div class="mb10 g3">模型名称</div>
        <div class="ell mb20">{{ modelName }}</div>
        <div class="mb10 ">模型编码</div>
        <div class="ell">{{getModelCode()}}</div>
      </template>

  </div>
</template>

<script>

import { getHmmodelList } from '@/apis/paas/HmModelController.js'
import {getAllTableList,getAllReloadComponent} from '../../../utils/component'
export default {
  name: 'TableSelect',
  props: {
    eventItem: {}, // 需要逻辑编排的对象
    componentItem: {},
    block: {},
    workspace: {}
  },
  components: { },
  computed: {
    compId: {
      get() {
        const blockComponentId = this.block?.getFieldValue('Component')
        return blockComponentId || ''
      },
      set(val) {
        this.block.setFieldValue(val, 'Component')
        this.getModelCode()
      }
    }
  },
  data () {
    return {
      formData: {},
      modelList: [], // 所有业务模型的list
      list: [] ,// 组件列表
      modelName: '', //模型名称
    }
  },
  watch: {
    'block': {
      handler() {
        this.getBlockData()
      },
      immediate: true
    }
  },
  methods: {
    getBlockData() {
      if(this.block.type === 'component_reload'){
        this.list = getAllReloadComponent()
      }else {
        this.list = getAllTableList() || []
      }
      if (!this.list.length) return
      const blockComponentId = this.block?.getFieldValue('Component')
      if (blockComponentId) {
        this.compId = blockComponentId
      }
    },
    getModelCode(){
      const  res = this.list.find(item=>item.key === this.compId)
      const modelCode = res?.__config?.modelCode
      modelCode ? this.getModelName(modelCode) : this.modelName = ''
      return modelCode  || ''
    },
    async getModelName(modelCode){
      const models = await getHmmodelList();
      const res = models.find(item=>item.code === modelCode)
      this.modelName = res?.name
    }
  }
}
</script>

<style scoped>

</style>
